var className = 'tool-tip';

var isIE = navigator.userAgent.indexOf('MSIE') > -1;

function showTooltip(obj, id, html, top, left, width, height) {
    if (document.getElementById(id) == null) {

        var tooltipBox;
        tooltipBox = document.createElement('div');
        tooltipBox.className = className;
        tooltipBox.id = id;
        tooltipBox.innerHTML = html;
        
        obj.appendChild(tooltipBox);
        
        tooltipBox.style.width = width ? width + 'px' : 'auto';
        tooltipBox.style.height = height ? height + 'px' : 'auto';

        if (!width && isIE) {
            tooltipBox.style.width = tooltipBox.offsetWidth;
        }

        tooltipBox.style.position = "absolute";
        tooltipBox.style.display = "block";

        var left = obj.offsetLeft + left;
        var top = obj.offsetTop + top;

        if (left + tooltipBox.offsetWidth > document.body.clientWidth) {
            var demoLeft = document.getElementById("demo").offsetLeft;
            left = document.body.clientWidth - tooltipBox.offsetWidth - demoLeft;
            if (left < 0) left = 0;
        }

        tooltipBox.style.left = left + 'px';
        tooltipBox.style.top = top + 'px';

        obj.onmouseleave = function () {
            setTimeout(function () {
                document.getElementById(id).style.display = "none";
            }, 100);
        };

    } else {
        document.getElementById(id).style.display = "block";
    }
}

var t1 = document.getElementById("tooltip1");
var t2 = document.getElementById("tooltip2");
var t3 = document.getElementById("tooltip3");
var t4 = document.getElementById("tooltip4");
var t5 = document.getElementById("tooltip5");
var t6 = document.getElementById("tooltip6");




